
<template>
  <div class="app-container" >
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item>
        <el-input  v-model="queryParams.search" placeholder="请输入收款方名称/收款方ID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input  v-model="queryParams.searchType" placeholder="请输入付款单号/提现单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryParams.paymentType"
          placeholder="请选择付款方式"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.index"
            :label="item.name"
            :value="item.index"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select
          v-model="queryParams.paymentStatus"
          placeholder="请选择收款状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in statusData"
            :key="item.index"
            :label="item.name"
            :value="item.index"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  icon="el-icon-search" size="mini"  type="primary" @click="getRefundPaymentList">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="targetId"
        label="收账方ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="收账方名称">
      </el-table-column>
      <el-table-column
        label="收账方类型">
        <template slot-scope="scope">
          <span>{{scope.row.refundType|changeRefundType}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="withdrawNo"
        label="提现单号">
      </el-table-column>
      <el-table-column
        prop="cxyy"
        label="微信APPID">
      </el-table-column>
      <el-table-column
        prop="cxyy"
        label="微信OPENID">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="付款时间">
      </el-table-column>
      <el-table-column
        prop="paymentNo"
        label="付款单号">
      </el-table-column>
      <el-table-column
        prop="paymentMoney"
        label="付款金额">
      </el-table-column>
      <el-table-column
        label="付款方式">
        <template slot-scope="scope">
          <span>{{scope.row.withdrawType|changeWithdrawType}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="付款状态">
        <template slot-scope="scope">
          <span>{{scope.row.withdrawStatus|changeWithdrawStatus}}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="paginationBox">
      <el-pagination
        :page-sizes="[10, 50, 100, 200]"
        :page-size.sync="queryParams.pageSize"
        :current-page.sync="queryParams.pageNum"
        @size-change="getRefundPaymentList"
        @current-change="getRefundPaymentList"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

  import {  getRefundPaymentList } from '@/api/separateAccounts'
  export default {
    name: "records",

    data() {
      return {
        statusOptions: [
          {index:"1",name:"微信钱包"}
        ],
        queryParams: {
          pageSize:10,
          pageNum:1
        },
        dateTime:[],
        tableData: [],
        total:0,
        statusData:[
          {index:0,name:"未付款"},
          {index:1,name:"付款中"},
          {index:2,name:"已付款"},
          ]
      }
    },
    watch: {
      dateTime(val){
        if(val.length>0){
          this.queryParams.startTime=val[0]
          this.queryParams.endTime=val[1]
        }
      }
    },
    mounted() {
      this.getRefundPaymentList()
    },
    methods: {
      resetQuery(){
        this.queryParams= {
          pageSize:10,
          pageNum:1
        }
        this.dateTime=[]
        this.getRefundPaymentList()

      },
      getRefundPaymentList(){
        let param ={
          type:2,
          ...this.queryParams
        }
        getRefundPaymentList(param).then(res=>{
          if(res.code == 200){
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
